{% load humanize %}
{% load display_tags %}
{% load authorization_tags %}
<div class="col-md-12">
    <div class="panel panel-default table-responsive">
        <div class="panel-heading">
            <h4> {% if status == "open" %}Active{% elif status == "paused" %}Paused {% else %}Closed{% endif %} Engagements ({{ count }})
                <div class="dropdown pull-right">
                    <button id="show-filters-{{status}}" data-toggle="collapse" data-target="#the-filters-{{status}}" class="btn btn-primary toggle-filters" aria-label="Filter"> <i class="fa-solid fa-filter"></i> <i class="caret"></i> </button>
                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" aria-label="Add Engagement"
                    data-toggle="dropdown" aria-expanded="true">
                <span class="fa-solid fa-bars"></span>
                <span class="caret"></span>
            </button>
          <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation">
                                <a class="" href="{% url 'new_eng_for_prod' prod.id %}">
                                    <i class="fa-solid fa-plus"></i> Add New Interactive Engagement
                                </a>
                            </li>
                            <li role="presentation">
                                <a class="" href="{% url 'new_eng_for_prod_cicd' prod.id %}">
                                    <i class="fa-solid fa-plus"></i> Add New CI/CD Engagement
                                </a>
                            </li>
                    </ul>
                </div>
              </h4>
        </div>
        <div id="the-filters-{{status}}" class="is-filters panel-body collapse {% if filter.form.has_changed %}in{% endif %}">
            {% include "dojo/filter_snippet.html" with form=filter.form %}
        </div>

        <div class="clearfix pagination-in-panel">
            {% include "dojo/paging_snippet.html" with page=engs prefix=prefix page_size=True %}
        </div>
        {% if engs %}
            <table id={{ status }} class="tablesorter-bootstrap table table-condensed table-striped table-hover">
                <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Lead</th>
                    <th class="text-left">Date</th>
                    <th class="text-left">Length</th>
                    {% if system_settings.enable_jira %}
                    <th class="text-center">JIRA</th>
                    {% endif %}
                    <th class="text-center">Tests</th>
                    <th class="text-center">Active (Verified / Fixable)</th>
                    <th class="text-center">Mitigated</th>
                    <th class="text-center">Accepted</th>
                    <th class="text-center">All</th>
                    <th class="text-center">Duplicates</th>
                    {% if status == "paused" or status == "closed" %}
                      <th class="text-left">Status</th>
                    {% endif %}
                </tr>
                </thead>
                <tbody>
                {% for eng in engs %}
                    <tr>
                    <td class="nowrap">
                      <div class="align-top">
                        <div class="dropdown">
                          <a href="#" class="dropdown-toggle pull-left" data-toggle="dropdown">&nbsp;<i class="fa-solid fa-ellipsis-vertical"></i>&nbsp;</a>
                          <ul class="dropdown-menu">
                             <li>
                               <a class="" href="{% url 'view_engagement' eng.id %}">
                                 <i class="fa-solid fa-rectangle-list"></i> View
                             </li>
                             {% if eng|has_object_permission:"Engagement_Edit" %}
                             <li>
                               <a class="" href="{% url 'edit_engagement' eng.id %}">
                                 <i class="fa-solid fa-pen-to-square"></i> Edit
                               </a>
                            </li>
                            <li>
                              <a class="" href="{% url 'copy_engagement' eng.id %}">
                                <i class="fa-solid fa-copy"></i> Copy
                              </a>
                           </li>
                            <li>
                              </a>
                              {% if status == "open" or status == "paused" %}
                              <a class="" href="{% url 'close_engagement' eng.id %}">
                                <i class="fa-solid fa-xmark"></i> Close
                              {% else %}
                              <a class="" href="{% url 'reopen_engagement' eng.id %}">
                                <i class="fa-solid fa-rotate-left"></i> Reopen
                              </a>
                              {% endif %}
                              </a>
                            </li>
                            <li class="divider"></li>
                            {% endif %}
                            {% if eng|has_object_permission:"Test_Add" %}
                            <li role="presentation">
                                <a class="" href="{% url 'add_tests' eng.id %}">
                                    <i class="fa-solid fa-plus"></i> Add Tests
                                </a>
                            </li>
                            {% endif %}
                            {% if eng|has_object_permission:"Import_Scan_Result" %}
                            <li role="presentation">
                                <a class="" href="{% url 'import_scan_results' eng.id %}">
                                    <i class="fa-solid fa-upload"></i> Import Scan Results
                                </a>
                            </li>
                            {% endif %}
                            <li class="divider"></li>
                            <li role="presentation">
                              <a href="{% url 'engagement_open_findings' eng.id %}">
                                <i class="fa-solid fa-file-lines"></i> View Active Findings
                              </a>
                            </li>
                            <li role="presentation">
                              <a href="{% url 'engagement_verified_findings' eng.id %}">
                                <i class="fa-solid fa-file-lines"></i> View Active and Verified Findings
                              </a>
                            </li>
                            <li role="presentation">
                              <a href="{% url 'engagement_closed_findings' eng.id %}">
                                <i class="fa-solid fa-file-lines"></i> View Mitigated Findings
                              </a>
                            </li>
                            <li role="presentation">
                                <a href="{% url 'engagement_accepted_findings' eng.id %}">
                                    <i class="fa-solid fa-file-lines"></i> View Accepted Findings
                                </a>
                              </li>
                            <li role="presentation">
                              <a href="{% url 'engagement_all_findings' eng.id %}">
                                  <i class="fa-solid fa-file-lines"></i> View All Findings
                              </a>
                            </li>
                              <li class="divider"></li>
                            <li role="presentation">
                              <a href="{% url 'engagement_report' eng.id %}?title=&active=1&verified=1&false_p=2&duplicate=2">
                                  <i class="fa-solid fa-file-lines"></i> Engagement Report
                              </a>
                            </li>
                            {% if eng|has_object_permission:"Engagement_Delete" %}
                            <li class="divider"></li>
                            <li>
                              <a class="text-danger" href="{% url 'delete_engagement' eng.id %}">
                                  <i class="fa-solid fa-trash"></i> Delete Engagement
                              </a>
                            </li>
                            {% endif %}
                           </ul>
                         </li>
                     </ul>
                    </td>
                    <td style="width: 250px;">
                    <a href="{% url 'view_engagement' eng.id %}" data-toggle="tooltip" data-placement="bottom" title="{{ eng.name|default:"N/A" }}">
                    {{ eng.name|truncatechars_html:35|default:"N/A" }}</a>
                    {% if eng.version %}
                        <sup>
                              <a target="_blank" class="tag-label tag-version" data-toggle="tooltip" data-placement="bottom" title="Product Version: {{ eng.version }}">
                              {{ eng.version }}</a>
                        </sup>
                    {% endif %}
                    {% include "dojo/snippets/tags.html" with tags=eng.tags.all %}
                    </td>
                    <td>{{ eng.engagement_type }}</td>
                    <td style="width: 150px;">
                      {% if eng.lead.get_full_name and eng.lead.get_full_name.strip %}
                          {{ eng.lead.get_full_name }}
                      {% else %}
                          {{ eng.lead |default_if_none:""}}
                      {% endif %}
                    </td>
                    <td class="text-left" style="width: 200px;" data-order={{ eng.target_start|date:"U" }}>
                      <a target="#" data-toggle="tooltip" data-placement="bottom" title="{{ eng.target_start|date:"l, jS F Y" }} - {{ eng.target_end|date:"l, jS F Y" }}">
                      {{ eng.target_start|date:"jS F" }} {% if eng.target_start|datediff_time:eng.target_end != "1 day" %} - {{ eng.target_end|date:"jS F" }}{% endif %}
                    </a>
                    </td>
                    <td class="text-left" class="nowrap">{{ eng.target_start|datediff_time:eng.target_end }}
                      {% if status == "open" %}
                        {% if eng.is_overdue and eng.status != 'Completed' %}
                        <sup>
                          <div class="tag-label warning-color">
                            {{ eng.target_end|overdue }} overdue
                          </div>
                        </sup>
                        {% endif %}
                        {% if eng.count_tests == 0 %}
                        &nbsp;<sup>
                          <div class="tag-label amber-color">
                            no tests
                          </div>
                        </sup>
                        {% endif %}
                        {% if eng.count_findings_all == 0 %}
                        &nbsp;<sup>
                          <div class="tag-label amber-color">
                            no findings
                          </div>
                        </sup>
                        {% endif %}
                      {% endif %}
                    </td>
                    {% if system_settings.enable_jira %}
                    <td class="text-center">
                      {{ eng|jira_project_tag }}
                    </td>
                    {% endif %}
                    <td class="text-center" class="nowrap" data-order="{{ eng.count_tests }}">
                      <div class="align-top">
                      {% if eng.count_tests %}
                      <div class="dropdown">
                        <a href="{% url 'view_engagement' eng.id %}#tests">{{ eng.count_tests }}</a>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">&nbsp;<i class="fa-solid fa-ellipsis-vertical"></i>&nbsp;</a>
                        <ul class="dropdown-menu">
                          <li>
                            <a>
                              <i class="fa-solid fa-circle-info"></i>
                              {% if eng.test_set.all|length %}
                                Recent tests
                              {% else %}
                                No recent tests
                              {% endif %}
                              (last {{recent_test_day_count}} day{{recent_test_day_count|pluralize}})
                            </a>
                          </li>
                          {% for test in eng.test_set.all %}
                            <li>
                              <a href="{% url 'view_test' test.id %}">
                                <i class="fa-solid fa-rectangle-list"></i> {{test}}, {{test.updated}}
                              </a>
                            </li>
                          {% endfor %}
                          <li>
                            <a href="{% url 'view_engagement' eng.id %}#tests">
                              <i class="fa-solid fa-earth-americas"></i> View all {{ eng.count_tests }} tests...
                            </a>
                          </li>
                        </ul>
                      </div>
                      {% else %}
                      <a href="{% url 'view_engagement' eng.id %}">{{ eng.count_tests }}</a>
                      {% endif %}
                      </div>
                    </td>
                    <td class="text-center" data-order="{{ eng.count_findings_open }}">{{ eng.count_findings_open }}&nbsp;({{ eng.count_findings_open_verified}}/{{ eng.count_findings_fix_available}})</td>
                    <td class="text-center">{{ eng.count_findings_close }}</td>
                    <td class="text-center">{{ eng.count_findings_accepted }}</td>
                    <td class="text-center">{{ eng.count_findings_all }}</td>
                    <td class="text-center">{{ eng.count_findings_duplicate }}</td>
                    {% if status == "paused" or status == "closed" %}
                    <td class="text-left">
                      {% if eng.status == "Blocked" %}
                      <em class="text-danger">
                      {% elif eng.status == "On Hold" %}
                      <em class="text-warning">
                      {% else %}
                      <em>
                      {% endif %}
                      {{ eng.status }}
                    </em>
                    </td>
                    {% endif %}
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div id='no_{% if status == "open" %}active{% elif status == "paused" %}paused{% else %}closed{% endif %}_engagements' class="panel-body">
                <p class="text-muted">No {% if status == "open" %}active{% elif status == "paused" %}paused{% else %}closed{% endif %} engagements found.</p>
            </div>
        {% endif %}

        <div class="clearfix pagination-in-panel">
            {% include "dojo/paging_snippet.html" with page=engs prefix=prefix page_size=True %}
        </div>
    </div>
</div>
{% block postscript %}
<script>
        // DataTables setup
        $(document).ready(function() {
            var date =  new Date().toISOString().slice(0, 10);
            var fileDated = 'Engagements_List_' + date;
            var buttonCommon = {
                exportOptions: {
                    columns: ':not(:eq(8))',
                    stripHtml: true,
                    stripNewlines: true,
                    trim: true,
                    orthogonal: 'export'
                },
                filename: fileDated,
                title: 'Engagements List'
            };

            // Mapping of table columns to objects for proper cleanup and data formatting
            {% if enable_table_filtering %}
              var dojoTable = $('#{{status}}').DataTable({
                  colReorder: true,
                  "columns": [
                      { "data": "action" },
                      { "data": "eng_name" },
                      { "data": "engagement_type" },
                      { "data": "lead" },
                      null,
                      { "data": "length", "type": "num", render: function(data, type, row) {
                        if(type === 'sort') {
                          data = data.split(' ')[0];
                        }
                        return data
                      }},
                      {% if system_settings.enable_jira %}
                          { "data": "jira" },
                      {% endif %}
                      null, // "tests"
                      null, // "data"
                      { "data": "mitigated" },
                      { "data": "accepted" },
                      { "data": "all" },
                      { "data": "dups" },
                      {% if status == "paused" or status == "closed" %}
                        { "data": "status" },
                      {% endif %}
                  ],
                  columnDefs: [
                      {
                          "orderable": false,
                          "targets": [0]
                      },
                  ],
                  dom: 'Bfrtip',
                  paging: false,
                  info: false,
                  buttons: [
                      {
                          extend: 'colvis',
                          columns: ':not(.noVis)'
                      },
                      $.extend( true, {}, buttonCommon, {
                          extend: 'copy'
                      }),
                      $.extend( true, {}, buttonCommon, {
                          extend: 'excel',
                          autoFilter: true,
                          sheetName: 'Exported data',
                      }),
                      $.extend( true, {}, buttonCommon, {
                          extend: 'csv'
                      }),
                      $.extend( true, {}, buttonCommon, {
                          extend: 'pdf',
                          orientation: 'landscape',
                          pageSize: 'LETTER'
                      }),
                      $.extend( true, {}, buttonCommon, {
                          extend: 'print'
                      }),
                  ],
              });
            {% endif %}
        });
    </script>
    {% endblock %}
